<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main
        v-loading="submitLoading"
        :style="{ 'max-height': maxHeightDialog }"
        :element-loading-text="submitLoading ? '提交中...' : '加载中...'"
        class="container-main"
      >
        <div>
          <div class="title">
            <span>填写信息</span>
          </div>

          <el-card
            class="card"
            shadow="never"
            style="background: #fafafa; min-height: 450px"
          >
            <div style="margin-left: -12px; margin-right: -12px">
              <el-row>
                <el-col :span="23">
                  <el-form
                    ref="elForm"
                    size="small"
                    label-position="right"
                    :model="form"
                    :rules="rules"
                    label-width="150px"
                  >
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="绑定场所">
                          <el-select
                            v-model="form.placeId"
                            placeholder="请选择绑定场所"
                            filterable
                            clearable
                            style="width: 100%"
                          >
                            <el-option
                              v-for="item of placeList"
                              :key="item.id"
                              :label="item.placeName"
                              :value="item.id"
                            /> </el-select
                        ></el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="设备名称" prop="deviceName">
                          <el-input
                            v-model="form.deviceName"
                            placeholder="请输入设备名称"
                            clearable
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="设备序列号" prop="sn">
                          <el-input
                            v-model="form.sn"
                            placeholder="请输入设备序列号"
                            clearable
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="设备类型" prop="type">
                          <el-select
                            v-model="form.type"
                            popper-class="global-select"
                            placeholder="选择设备类型"
                            clearable
                            filterable
                          >
                            <el-option
                              v-for="item in deviceTypeList"
                              :key="item.dictValue"
                              :label="item.dictText"
                              :value="item.dictValue"
                            />
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="设备ip地址">
                          <el-input
                            v-model="form.ip"
                            placeholder="请输入设备ip地址"
                            clearable
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="4G/5G MAC地址">
                          <el-input
                            v-model="form.mobileMac"
                            placeholder="请输入4G/5G MAC地址"
                            clearable
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="WIFI MAC地址">
                          <el-input
                            v-model="form.wifiMac"
                            placeholder="请输入WIFI MAC地址"
                            clearable
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="以太网 MAC地址">
                          <el-input
                            v-model="form.ethernetMac"
                            placeholder="请输入以太网 MAC地址"
                            clearable
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-main>

      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          :disabled="submitLoading"
          style="width: 120px; margin-right: 10px"
          @click="isVisible = false"
        >
          取消
        </el-button>
        <el-button
          size="medium"
          type="primary"
          icon="el-icon-check"
          :disabled="submitLoading"
          :loading="submitLoading"
          style="width: 120px"
          @click="toSubmit"
        >
          {{ params.type == 'edit' ? '修改' : '提交' }}
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
import dataFormMixins from '@/mixins/data-form-mixins'
import EpidemicPreventionManageApi from '@/api/epidemic-prevention-manage'
import deviceManageApi from '@/api/device-manage'
export default {
  name: 'DeviceRecordsAdd',
  components: {},
  mixins: [dataFormMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      placeList: [],
      deviceTypeList: [],
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  mounted() {
    this.form = this.initForm()
    this.rules = this.initRules()
    this.getPlaceList()
    this.getDeviceTypeList()
    if (this.params.type === 'edit') {
      Object.keys(this.form).forEach((key) => {
        Object.keys(this.params.item).forEach((_key) => {
          if (key == _key) {
            this.form[key] = this.params.item[_key]
          }
        })
      })
      this.form.placeId = Number(this.params.item.placeId)
    }
  },
  methods: {
    initForm() {
      return {
        id: '',
        tenantId: '', // 租户ID
        placeId: '', // 绑定场所
        deviceName: '', // 设备名称
        sn: '', // 设备序列号
        type: '', // 设备类型
        ip: '', // 设备IP地址
        mobileMac: '', // 4G/5G MAC地址
        wifiMac: '', // WIFI MAC地址
        ethernetMac: '', // 以太网 MAC地址
        status: 1, // 状态
      }
    },
    initRules() {
      return {
        deviceName: this.getValidatorForm(),
        sn: this.getValidatorForm(),
        type: this.getValidatorForm(),
      }
    },
    getPlaceList() {
      EpidemicPreventionManageApi.getAllPlaces().then((res) => {
        if (res.data.code == 200) {
          this.placeList = res.data.data
        }
      })
    },
    getDeviceTypeList() {
      const data = {
        dictId: 110,
      }
      deviceManageApi.getDictValueListById(data).then((ret) => {
        this.deviceTypeList = ret.data
        console.log('deviceTypeList=', this.deviceTypeList)
      })
    },

    toClose() {
      this.$emit('close')
    },
    toSubmit() {
      this.$refs.elForm.validate((valid) => {
        console.log('form', this.form)
        if (valid) {
          const model = this.formatFormData(this.form)

          console.log('model=', model)

          this.submitLoading = true
          if (this.params.type === 'add') {
            EpidemicPreventionManageApi.addDevice(model)
              .then((res) => {
                if (res.data.code == 200) {
                  this.$message({
                    message: '提交成功！',
                    type: 'success',
                  })
                  this.submitLoading = false
                  this.isVisible = false
                  this.$emit('submit', 'add')
                } else {
                  this.$message({
                    message: '提交失败！',
                    type: 'error',
                  })
                  this.submitLoading = false
                }
              })
              .catch(() => {
                this.submitLoading = false
              })
          } else {
            EpidemicPreventionManageApi.updateDevice(model)
              .then((res) => {
                if (res.data.code == 200) {
                  this.$message({
                    message: '修改成功！',
                    type: 'success',
                  })
                  this.submitLoading = false
                  this.isVisible = false
                  this.$emit('submit', 'edit')
                } else {
                  this.$message({
                    message: '修改失败！',
                    type: 'error',
                  })
                  this.submitLoading = false
                }
              })
              .catch(() => {
                this.submitLoading = false
              })
          }
        } else {
          this.$message({
            message: '*必填项不能为空！',
            type: 'warning',
            duration: 4000,
          })
          return false
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
@import '../../../../../styles/part-custom';
</style>
